<template>
  <div class="flex-f bg yjn">
    <el-select
      style="display: inline-block; width: 50%"
      size="medium"
      v-model="selectValue"
      placeholder="请选择时间维度"
      
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>

    <el-date-picker
      style="display: inline-block; width: 50%"
      size="medium"
      v-if="selectValue == 'valueMonth'"
      v-model="valueMonth"
      type="month"
      format="yyyy年M月"
      value-format="yyyy-MM"
      placeholder="选择月"
    >
    </el-date-picker>

    <el-date-picker
      style="display: inline-block; width: 50%"
      width="80%"
      size="medium"
      v-if="selectValue == 'valueYear'"
      v-model="valueYear"
      type="year"
      format="yyyy年"
      value-format="yyyy"
      placeholder="选择年"
    >
    </el-date-picker>

    <quarterPicker
      v-if="selectValue == 'valueQ'"
      style="display: inline-block; width: 50%"
      size="medium"
      format="yyyy年q季度"
      value-format="yyyyMM"
      placeholder="选择季度"
      v-model="valueQ"
      @change="handleChangeQuarter"
    />
    <!-- :disabled-date="disabledQuarter" -->
  </div>
</template>
<script>
import quarterPicker from "./q.vue";
export default {
  name: "deepEchartBar",
  components: { quarterPicker },
  props: {
    yjnChange: [Function],
  },
  created() {},
  watch: {
    valueYear() {
      let obj = { dateType: "4", time: this.valueYear };
      console.info(obj);
      this.valueYear ? this.$emit("yjnChange", obj) : "";
    },
    valueMonth() {
      let obj = { dateType: "2", time: this.valueMonth };
      console.info(obj);
      this.valueMonth ? this.$emit("yjnChange", obj) : "";
    },
    valueQ() {
      let temp = this.valueQ.split("");
      temp[4] = "-Q";
      temp[5] == "4"
        ? (temp[5] = 2)
        : temp[5] == "7"
        ? (temp[5] = 3)
        : temp[5] == "0"
        ? (temp[5] = "4")
        : "";
      temp = temp.join("");
      let obj = { dateType: "3", time: temp };
      console.info(obj);
      this.valueQ ? this.$emit("yjnChange", obj) : "";
    },
    selectValue() {
      this.valueYear = "";
      this.valueMonth = "";
      this.valueQ = "";
    },
  },
  computed: {},
  data() {
    return {
      disabledQuarter: (time) => {
        const now = new Date();
        return (
          time.getFullYear() > now.getFullYear() ||
          (time.getFullYear() === now.getFullYear() &&
            parseInt(time.getMonth() / 3) >= parseInt(now.getMonth() / 3))
        );
      },
      valueYear: "2023",
      valueMonth: "",
      valueQ: "",
      selectValue: "valueYear",
      options: [
        { label: "月", value: "valueMonth" },
        { label: "年", value: "valueYear" },
        { label: "季", value: "valueQ" },
      ],
    };
  },
  methods: {
    handleChangeQuarter(date) {
      console.info(date);
      // this.$emit('yjnChange',date)
    },
    clear() {
      this.valueYear = "";
      this.valueMonth = "";
      this.valueQ = "";
    },
  },
};
</script>

<style lang="scss">
.yjn {
  &.bg {
    background-image: url(./img/k2.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 36px;
    box-sizing: border-box;
    width: 214px;
  }
  .el-input__inner {
    border-color: transparent !important;
    background: transparent !important;
    color: #fff !important;
    padding-left: 10px;
    padding-right: 10px;
    color: #fff !important;
    text-align: center;
  }
  .el-icon-date {
    display: none;
  }
}
</style>
